<script>
import { mapActions } from 'vuex';

export default {
    data() {
        return {
            imageUrl: 'https://iot.fastbee.cn/prod-api/'+this.$store.state.profile.user.avatar,
            /* personalInformation:[
                {label:'用户名称',userName:"fastbee"},
                {label:'手机号码',phone:"18888888888"},
                {label:'用户邮箱',emile:"22121@qq.com"},
                {label:'所属部门',department:"蜂信物联/ 普通员工"},
                {label:'所属角色',role:"游客"},
                {label:'创建日期',creationDate:"2022-03-09 16:49:19"}
            ] */
            personalInformation: [
                { label: '用户名称', value: "fastbee" },
                { label: '手机号码', value: "18888888888" },
                { label: '用户邮箱', value: "22121@qq.com" },
                { label: '所属部门', value: "蜂信物联/ 普通员工" },
                { label: '所属角色', value: "游客" },
                { label: '创建日期', value: "2022-03-09 16:49:19" }
            ]
        }
    },
    methods: {
        ...mapActions(['getProfileAsync']),
        //获取个人中心数据
        getProfileData() {
            let data = this.getProfileAsync()
            console.log(data);
        },

        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
        
    },
    created() {
        console.log(this.$store.state);
    }

}
</script>

<template>
    <div class="personal-center">
        <div class="personal-information">
            <el-card class="box-card" header="个人信息">
                <div class="avatar-box">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>

                <ul class="user-details">
                    <el-divider></el-divider>
                    <li><span @click="getProfileData">用户名称</span>
                        <p>fastbee</p>
                    </li>
                    <el-divider></el-divider>
                    <li><span>手机号码</span>
                        <p>18888888888</p>
                    </li>
                    <el-divider></el-divider>
                    <li><span>用户邮箱</span>
                        <p>22121@qq.com</p>
                    </li>
                    <el-divider></el-divider>
                    <li><span>所属部门</span>
                        <p>蜂信物联 / 普通员工</p>
                    </li>
                    <el-divider></el-divider>
                    <li><span>所属角色</span>
                        <p>游客</p>
                    </li>
                    <el-divider></el-divider>
                    <li><span>创建日期</span>
                        <p>2022-03-09 16:49:19</p>
                    </li>
                    <el-divider></el-divider>
                    <li><span>微信绑定</span> <el-link type="primary" :underline="false">已绑定, 点击解绑</el-link> </li>
                    <el-divider></el-divider>
                </ul>
            </el-card>
        </div>
        <div class="basic-nformation">
            <el-form></el-form>
        </div>
    </div>
</template>

<style lang="less" scoped>
.personal-center {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    // ::v-deep(){}
    .personal-information {
        height: 900px;
        flex: 1 1 auto;
        margin: 10px;
        border: 1px solid #eee;
        background-color: #fff;
        box-shadow: 0px 10px 10px #e0dfdf;

        ::v-deep(.box-card) {
            height: 100%;
            font-size: 16px;

            .avatar-box {
                .avatar-uploader {
                    text-align: center;

                    .el-upload {
                        height: 120px;
                        border: 1px dashed #a09b9b;
                        border-radius: 100%;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;

                        &:hover {
                            border-color: #409EFF;
                        }

                        .avatar-uploader-icon {
                            font-size: 28px;
                            color: #8c939d;
                            width: 120px;
                            height: 120px;
                            line-height: 120px;
                            text-align: center;
                        }
                    }

                    .avatar {
                        width: 120px;
                        height: 120px;
                        display: block;
                    }
                }
            }

            .user-details {
                li {
                    display: flex;
                    justify-content: space-between;
                    // line-height: 20px;
                    border-bottom: #e91d1d;

                }
            }
        }
    }

    .basic-nformation {
        height: 450px;
        flex: 10 1 auto;
        margin: 10px;
        border: 1px solid #eee;
        background-color: #fff;
        box-shadow: 0px 10px 10px #e0dfdf;
    }
}

@media screen and (max-width:750px) {
    .personal-center {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        .personal-information {
            height: 900px;
            flex: 1 1 auto;
            margin: 20px;
            border: 1px solid #eee;
            background-color: #fff;
            box-shadow: 0px 10px 10px #e0dfdf;
        }

        .basic-nformation {
            height: 450px;
            flex: 1 1 auto;
            margin: 20px;
            border: 1px solid #eee;
            background-color: #fff;
            box-shadow: 0px 10px 10px #e0dfdf;
        }
    }
}
</style>


<!-- <template>
    <el-row :gutter="12">
        <el-col :span="8" class="left">
            <el-card shadow="always" header="个人信息" class="left-centent" >
                <el-descriptions  colon="false" contentClassName>
                    <el-descriptions-item label="用户名" class="el-icon-user">kooriookami</el-descriptions-item>
                    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
                    <el-descriptions-item label="居住地" :contentStyle="{'text-align': 'right'}">苏州市</el-descriptions-item>
                    <el-descriptions-item label="备注" :contentStyle="{'text-align': 'right'}">学校</el-descriptions-item>
                    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-col>
        <el-col :span="16" class="right">
            <el-card shadow="always" header="基本资料" class="right-centent">
            </el-card>
        </el-col>
    </el-row>
</template>
<script>
export default{
    data(){
        return{
            avatarUrl:''
        }
    }
}

</script>

<style>
.left{
    .left-centent{
        .el-descriptions{
            .el-descriptions-item{
                display: flex;
                justify-content: space-between;
                line-height: 60px;
                border-bottom: 1px solid rgb(155, 157, 155);
                
            }
        }
    }
}


</style> -->


